<template>
  <div class="editable-text-component" :class="textClasses">
    <!-- 内联编辑模式 - 直接在页面上编辑 -->
    <div
      
      
      class="inline-edit-content"
      :contenteditable="isEditing"
      :style="textStyle"
      @click="startEditing"
      @blur="finishEditing"
      @keydown.enter.meta="finishEditing"
      @keydown.esc="cancelEditing"
      ref="editElement"
    >
      {{ localContent }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditableText',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'editable-text',
      displayName: '可编辑文本',
      description: '支持点击直接编辑内容的文本组件',
      icon: 'fa-font',
      category: '基础组件',
      version: '1.0.0'
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'content',
            label: '文本内容',
            type: 'text',
            defaultValue: '可编辑文本'
          },
          {
            name: 'placeholder',
            label: '占位文本',
            type: 'text',
            defaultValue: '点击编辑文本'
          },
          {
            name: 'fontSize',
            label: '字体大小',
            type: 'number',
            defaultValue: 16,
            suffix: 'px'
          },
          {
            name: 'fontWeight',
            label: '字体粗细',
            type: 'select',
            options: [
              { label: '正常', value: 'normal' },
              { label: '加粗', value: 'bold' }
            ],
            defaultValue: 'normal'
          },
          {
            name: 'textColor',
            label: '文字颜色',
            type: 'color',
            defaultValue: '#333333'
          },
          {
            name: 'textAlign',
            label: '文本对齐',
            type: 'select',
            options: [
              { label: '左对齐', value: 'left' },
              { label: '居中对齐', value: 'center' },
              { label: '右对齐', value: 'right' }
            ],
            defaultValue: 'left'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'content-change',
        label: '内容变更',
        description: '当文本内容被修改并确认时触发'
      }
    ]
  },
  
  props: {
    content: {
      type: String,
      default: '可编辑文本'
    },
    
    placeholder: {
      type: String,
      default: ''
    },
    
    fontSize: {
      type: [Number, String],
      default: 16
    },
    
    fontWeight: {
      type: String,
      default: 'normal'
    },
    
    textColor: {
      type: String,
      default: '#333333'
    },
    
    textAlign: {
      type: String,
      default: 'left'
    }
  },
  
  emits: ['update:content', 'content-change'],
  
  data() {
    return {
      isEditing: false,
      localContent: this.content
    };
  },
  
  computed: {
    textStyle() {
      return {
        fontSize: `${this.fontSize}px`,
        fontWeight: this.fontWeight,
        color: this.textColor,
        textAlign: this.textAlign,
        minHeight: '20px',
        outline: 'none',
        cursor: this.isEditing ? 'text' : 'pointer',
        userSelect: this.isEditing ? 'text' : 'none',
        display: 'inline-block',
        width: 'fit-content'
      };
    },
    
    textClasses() {
      return {
        'cursor-pointer': !this.isEditing
      };
    }
  },
  
  watch: {
    content(newContent) {
      // 当外部content变化时，更新本地内容
      if (!this.isEditing) {
        this.localContent = newContent;
      }
    }
  },
  
  methods: {
    // 开始编辑
    startEditing() {
      this.isEditing = true;
      
      // 延迟聚焦，确保DOM已更新
      this.$nextTick(() => {
        const editElement = this.$refs.editElement;
        if (editElement) {
          editElement.focus();
          
          // 创建选中文本的范围
          const range = document.createRange();
          range.selectNodeContents(editElement);
          const selection = window.getSelection();
          selection.removeAllRanges();
          selection.addRange(range);
        }
      });
    },
    
    // 完成编辑
    finishEditing() {
      const editElement = this.$refs.editElement;
      if (editElement) {
        const newContent = editElement.textContent.trim() || this.placeholder || '可编辑文本';
        
        if (newContent !== this.content) {
          this.$emit('update:content', newContent);
          this.$emit('content-change', newContent);
        }
      }
      this.isEditing = false;
    },
    
    // 取消编辑
    cancelEditing(event) {
      event.preventDefault();
      const editElement = this.$refs.editElement;
      if (editElement) {
        editElement.textContent = this.content;
      }
      this.isEditing = false;
    }
  }
};
</script>

<style scoped>
.editable-text-component {
  display: inline-block;
  position: relative;
}

.inline-edit-content {
  transition: all 0.2s ease;
  border-radius: 2px;
  padding: 2px 4px;
  min-width: 50px;
}

.inline-edit-content:hover:not([contenteditable="true"]) {
  background-color: rgba(22, 93, 255, 0.05);
}

.inline-edit-content[contenteditable="true"] {
  background-color: rgba(22, 93, 255, 0.08);
  border: 1px dashed #165DFF;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
}

/* 移除contenteditable元素的默认焦点样式 */
.inline-edit-content:focus {
  outline: none;
}

/* 自定义光标样式 */
.inline-edit-content[contenteditable="true"] {
  caret-color: #165DFF;
}
</style>